<template>
  <div class="case-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <i class="fas fa-folder-open mr-3"></i>案件信息管理
          </h1>
          <p class="page-description">全局查看和管理所有案件信息，统计案件状态和进展</p>
        </div>
        <div class="header-actions">
          <el-button @click="refreshData">
            <i class="fas fa-sync mr-2"></i>刷新数据
          </el-button>
          <el-button @click="exportCases">
            <i class="fas fa-file-export mr-2"></i>导出案件
          </el-button>
          <el-button type="primary" @click="showStatistics">
            <i class="fas fa-chart-pie mr-2"></i>统计报表
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon bg-blue-100">
          <i class="fas fa-file-alt text-blue-600"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalCases }}</div>
          <div class="stat-label">总案件数</div>
          <div class="stat-change positive">
            <i class="fas fa-arrow-up"></i>
            本月 +{{ statistics.newCasesThisMonth }}
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon bg-green-100">
          <i class="fas fa-check-circle text-green-600"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.completedCases }}</div>
          <div class="stat-label">已完成案件</div>
          <div class="stat-change positive">
            <i class="fas fa-arrow-up"></i>
            完成率 {{ statistics.completionRate }}%
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon bg-orange-100">
          <i class="fas fa-clock text-orange-600"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.pendingCases }}</div>
          <div class="stat-label">处理中案件</div>
          <div class="stat-change neutral">
            <i class="fas fa-minus"></i>
            平均处理时长 {{ statistics.avgProcessingDays }}天
          </div>
        </div>
      </div>

      <div class="stat-card overdue-card" @click="showOverdueDetails">
        <div class="stat-icon bg-red-100">
          <i class="fas fa-exclamation-triangle text-red-600"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.overdueCases }}</div>
          <div class="stat-label">逾期案件</div>
          <div class="stat-change negative">
            <i class="fas fa-bell"></i>
            点击查看详情
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
      <div class="filter-left">
        <el-input
          v-model="searchQuery"
          placeholder="搜索案件编号、客户姓名、律师..."
          prefix-icon="el-icon-search"
          class="search-input"
          @input="handleSearch"
        />
        
        <el-select v-model="filters.department" placeholder="选择部门" class="filter-select">
          <el-option label="全部部门" value="" />
          <el-option label="市场部" value="marketing" />
          <el-option label="律师部" value="lawyer" />
          <el-option label="鉴定部" value="appraisal" />
          <el-option label="财务部" value="finance" />
        </el-select>

        <el-select v-model="filters.status" placeholder="选择状态" class="filter-select">
          <el-option label="全部状态" value="" />
          <el-option label="在办案件" value="active" />
          <el-option label="已结案件" value="completed" />
          <el-option label="待分配" value="pending" />
          <el-option label="进行中" value="in-progress" />
          <el-option label="待审核" value="review" />
          <el-option label="已归档" value="archived" />
        </el-select>

        <el-select v-model="filters.caseType" placeholder="案件类型" class="filter-select">
          <el-option label="全部类型" value="" />
          <el-option label="交通事故" value="traffic" />
          <el-option label="人身损害" value="personal" />
          <el-option label="意外险" value="accident" />
          <el-option label="工伤职伤" value="work" />
        </el-select>

        <el-date-picker
          v-model="filters.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-picker"
          @change="handleDateChange"
        />
      </div>

      <div class="filter-right">
        <el-button @click="resetFilters">
          <i class="fas fa-undo mr-1"></i>重置
        </el-button>
        <el-button type="primary" @click="applyFilters">
          <i class="fas fa-filter mr-1"></i>应用筛选
        </el-button>
      </div>
    </div>

    <!-- 案件列表 -->
    <div class="case-list-container">
      <el-table
        :data="filteredCases"
        stripe
        class="case-table"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" />
        
        <el-table-column prop="caseNumber" label="案件编号" width="140" sortable>
          <template #default="{ row }">
            <el-button type="text" @click="viewCaseDetail(row)" class="case-number-link">
              {{ row.caseNumber }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="clientName" label="客户姓名" width="120" />

        <el-table-column prop="caseType" label="案件类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getCaseTypeColor(row.caseType)" size="small">
              {{ getCaseTypeText(row.caseType) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="department" label="负责部门" width="100">
          <template #default="{ row }">
            <span class="department-badge" :class="getDepartmentClass(row.department)">
              {{ getDepartmentText(row.department) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="assignedLawyer" label="负责律师" width="120" />

        <el-table-column prop="status" label="案件状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="priority" label="优先级" width="80">
          <template #default="{ row }">
            <el-tag :type="getPriorityType(row.priority)" size="small">
              {{ getPriorityText(row.priority) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="progress" label="进度" width="150">
          <template #default="{ row }">
            <div class="progress-container">
              <el-progress 
                :percentage="Number(row.progress)" 
                :color="getProgressColor(row.progress)"
                :stroke-width="10"
                :show-text="true"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="createDate" label="创建时间" width="120" sortable>
          <template #default="{ row }">
            {{ formatDate(row.createDate) }}
          </template>
        </el-table-column>

        <el-table-column prop="deadline" label="截止时间" width="120" sortable>
          <template #default="{ row }">
            <span :class="{ 'text-red-500': isOverdue(row.deadline) }">
              {{ formatDate(row.deadline) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="text" size="small" @click="viewCaseDetail(row)">
                <i class="fas fa-eye mr-1"></i>详情
              </el-button>
              <el-button type="text" size="small" @click="editCase(row)">
                <i class="fas fa-edit mr-1"></i>编辑
              </el-button>
              <el-dropdown @command="handleMoreAction" trigger="click">
                <el-button type="text" size="small">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{action: 'transfer', case: row}">
                      <i class="fas fa-exchange-alt mr-2"></i>转移案件
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'archive', case: row}">
                      <i class="fas fa-archive mr-2"></i>归档
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'priority', case: row}">
                      <i class="fas fa-flag mr-2"></i>设置优先级
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'notes', case: row}">
                      <i class="fas fa-sticky-note mr-2"></i>添加备注
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 案件详情对话框 -->
    <el-dialog 
      v-model="detailDialogVisible" 
      :title="`案件详情 - ${selectedCase?.caseNumber}`"
      width="80%" 
      class="case-detail-dialog"
    >
      <div class="case-detail-content" v-if="selectedCase">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fas fa-info-circle mr-2"></i>基本信息
          </h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">案件编号:</span>
              <span class="value">{{ selectedCase.caseNumber }}</span>
            </div>
            <div class="info-item">
              <span class="label">客户姓名:</span>
              <span class="value">{{ selectedCase.clientName }}</span>
            </div>
            <div class="info-item">
              <span class="label">案件类型:</span>
              <el-tag :type="getCaseTypeColor(selectedCase.caseType)" size="small">
                {{ getCaseTypeText(selectedCase.caseType) }}
              </el-tag>
            </div>
            <div class="info-item">
              <span class="label">当前状态:</span>
              <el-tag :type="getStatusType(selectedCase.status)" size="small">
                {{ getStatusText(selectedCase.status) }}
              </el-tag>
            </div>
            <div class="info-item">
              <span class="label">负责部门:</span>
              <span class="department-badge" :class="getDepartmentClass(selectedCase.department)">
                {{ getDepartmentText(selectedCase.department) }}
              </span>
            </div>
            <div class="info-item">
              <span class="label">负责律师:</span>
              <span class="value">{{ selectedCase.assignedLawyer }}</span>
            </div>
            <div class="info-item">
              <span class="label">创建时间:</span>
              <span class="value">{{ formatDate(selectedCase.createDate) }}</span>
            </div>
            <div class="info-item">
              <span class="label">预计完成:</span>
              <span class="value" :class="{ 'text-red-500': isOverdue(selectedCase.deadline) }">
                {{ formatDate(selectedCase.deadline) }}
              </span>
            </div>
          </div>
        </div>

        <!-- 进度信息 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fas fa-tasks mr-2"></i>案件进度
          </h3>
          <div class="progress-detail">
            <div class="progress-overview">
              <div class="progress-circle">
                <el-progress
                  type="circle"
                  :percentage="selectedCase.progress"
                  :color="getProgressColor(selectedCase.progress)"
                  :width="80"
                />
              </div>
              <div class="progress-info">
                <div class="progress-text">
                  当前进度: {{ selectedCase.progress }}%
                </div>
                <div class="progress-stage">
                  阶段: {{ selectedCase.currentStage || '待开始' }}
                </div>
              </div>
            </div>
            
            <!-- 进度时间线 -->
            <div class="progress-timeline" v-if="selectedCase.timeline">
              <div 
                v-for="item in selectedCase.timeline" 
                :key="item.id" 
                class="timeline-item"
                :class="{ completed: item.completed, current: item.current }"
              >
                <div class="timeline-icon">
                  <i :class="item.completed ? 'fas fa-check' : item.current ? 'fas fa-clock' : 'far fa-circle'"></i>
                </div>
                <div class="timeline-content">
                  <div class="timeline-title">{{ item.title }}</div>
                  <div class="timeline-date" v-if="item.date">{{ item.date }}</div>
                  <div class="timeline-desc" v-if="item.description">{{ item.description }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作记录 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fas fa-history mr-2"></i>操作记录
          </h3>
          <div class="operation-logs" v-if="selectedCase.operationLogs">
            <div 
              v-for="log in selectedCase.operationLogs" 
              :key="log.id" 
              class="log-item"
            >
              <div class="log-time">{{ formatDateTime(log.time) }}</div>
              <div class="log-user">{{ log.user }}</div>
              <div class="log-action">{{ log.action }}</div>
              <div class="log-desc" v-if="log.description">{{ log.description }}</div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="editCase(selectedCase)">编辑案件</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 统计报表对话框 -->
    <el-dialog v-model="statisticsDialogVisible" title="案件统计报表" width="90%">
      <div class="statistics-content">
        <!-- 这里可以添加图表组件 -->
        <div class="charts-grid">
          <div class="chart-item">
            <h4>案件状态分布</h4>
            <div class="chart-placeholder">
              <!-- 饼图占位 -->
              <div class="chart-mock">状态分布饼图</div>
            </div>
          </div>
          <div class="chart-item">
            <h4>部门案件量统计</h4>
            <div class="chart-placeholder">
              <!-- 柱状图占位 -->
              <div class="chart-mock">部门统计柱状图</div>
            </div>
          </div>
          <div class="chart-item">
            <h4>案件趋势分析</h4>
            <div class="chart-placeholder">
              <!-- 折线图占位 -->
              <div class="chart-mock">趋势分析折线图</div>
            </div>
          </div>
          <div class="chart-item">
            <h4>律师工作量统计</h4>
            <div class="chart-placeholder">
              <!-- 排行榜占位 -->
              <div class="chart-mock">律师排行榜</div>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="statisticsDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="exportStatistics">导出报表</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 超期提醒对话框 -->
    <el-dialog v-model="overdueDialogVisible" title="案件超期提醒" width="90%">
      <div class="overdue-reminder-content">
        <!-- 超期统计概览 -->
        <div class="overdue-stats">
          <div class="overdue-stat-card critical">
            <div class="stat-icon">
              <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ overdueStats.criticalCount }}</div>
              <div class="stat-label">严重超期 (>7天)</div>
            </div>
          </div>
          <div class="overdue-stat-card warning">
            <div class="stat-icon">
              <i class="fas fa-clock"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ overdueStats.warningCount }}</div>
              <div class="stat-label">即将超期 (1-3天)</div>
            </div>
          </div>
          <div class="overdue-stat-card today">
            <div class="stat-icon">
              <i class="fas fa-calendar-day"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ overdueStats.todayCount }}</div>
              <div class="stat-label">今日到期</div>
            </div>
          </div>
        </div>

        <!-- 超期筛选 -->
        <div class="overdue-filters">
          <el-select v-model="overdueFilter" placeholder="选择超期类型" class="filter-select">
            <el-option label="全部超期" value="all"></el-option>
            <el-option label="严重超期 (>7天)" value="critical"></el-option>
            <el-option label="即将超期 (1-3天)" value="warning"></el-option>
            <el-option label="今日到期" value="today"></el-option>
          </el-select>
          
          <el-select v-model="overdueDepartment" placeholder="选择部门" class="filter-select">
            <el-option label="全部部门" value=""></el-option>
            <el-option label="律师部" value="lawyer"></el-option>
            <el-option label="鉴定部" value="appraisal"></el-option>
            <el-option label="市场部" value="marketing"></el-option>
          </el-select>

          <el-button type="warning" @click="sendBatchOverdueReminder">
            <i class="fas fa-bell mr-2"></i>批量提醒
          </el-button>
        </div>

        <!-- 超期案件列表 -->
        <div class="overdue-cases-table">
          <el-table 
            :data="filteredOverdueCases" 
            style="width: 100%"
            :loading="overdueLoading"
            @selection-change="handleOverdueSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            
            <el-table-column prop="caseNumber" label="案件编号" width="120">
              <template #default="{ row }">
                <el-link type="primary" @click="viewCaseDetail(row)">
                  {{ row.caseNumber }}
                </el-link>
              </template>
            </el-table-column>
            
            <el-table-column prop="title" label="案件标题" min-width="200"></el-table-column>
            
            <el-table-column prop="client" label="客户" width="120"></el-table-column>
            
            <el-table-column prop="lawyer" label="负责律师" width="120"></el-table-column>
            
            <el-table-column prop="department" label="所属部门" width="100">
              <template #default="{ row }">
                <el-tag :type="getDepartmentType(row.department)" size="small">
                  {{ getDepartmentText(row.department) }}
                </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column prop="deadline" label="截止日期" width="120">
              <template #default="{ row }">
                <span :class="{ 'overdue-date': isOverdue(row.deadline) }">
                  {{ formatDate(row.deadline) }}
                </span>
              </template>
            </el-table-column>
            
            <el-table-column label="超期天数" width="100">
              <template #default="{ row }">
                <el-tag 
                  :type="getOverdueType(getOverdueDays(row.deadline))" 
                  size="small"
                >
                  {{ getOverdueDays(row.deadline) }}天
                </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" size="small">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button size="small" type="warning" @click="sendSingleReminder(row)">
                  <i class="fas fa-bell mr-1"></i>提醒
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="overdue-pagination">
            <el-pagination
              v-model:current-page="overduePagination.currentPage"
              v-model:page-size="overduePagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="filteredOverdueCases.length"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleOverdueSizeChange"
              @current-change="handleOverdueCurrentChange"
            />
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="overdueDialogVisible = false">关闭</el-button>
          <el-button type="warning" @click="sendBatchOverdueReminder">
            <i class="fas fa-bell mr-2"></i>批量提醒选中案件
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

export default {
  name: 'AdminCaseManagement',
  setup() {
    // 响应式数据
    const loading = ref(false)
    const searchQuery = ref('')
    const detailDialogVisible = ref(false)
    const statisticsDialogVisible = ref(false)
    const selectedCase = ref(null)
    const selectedCases = ref([])

    // 筛选条件
    const filters = reactive({
      department: '',
      status: '',
      caseType: '',
      dateRange: null
    })

    // 分页信息
    const pagination = reactive({
      currentPage: 1,
      pageSize: 20,
      total: 0
    })

    // 统计数据
    const statistics = reactive({
      totalCases: 0,
      completedCases: 0,
      pendingCases: 0,
      overdueCases: 0,
      newCasesThisMonth: 0,
      completionRate: 0,
      avgProcessingDays: 0
    })

    // 案件数据
    const cases = ref([])

    // 超期提醒相关状态
    const overdueDialogVisible = ref(false)
    const overdueLoading = ref(false)
    const overdueFilter = ref('all')
    const overdueDepartment = ref('')
    const selectedOverdueCases = ref([])
    
    // 超期分页
    const overduePagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })

    // 超期统计
    const overdueStats = reactive({
      criticalCount: 0,
      warningCount: 0, 
      todayCount: 0
    })

    // 计算属性 - 过滤后的案件列表
    const filteredCases = computed(() => {
      let result = cases.value

      // 搜索筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(case_ => 
          case_.caseNumber.toLowerCase().includes(query) ||
          case_.clientName.toLowerCase().includes(query) ||
          case_.assignedLawyer.toLowerCase().includes(query)
        )
      }

      // 部门筛选
      if (filters.department) {
        result = result.filter(case_ => case_.department === filters.department)
      }

      // 状态筛选
      if (filters.status) {
        if (filters.status === 'active') {
          // 在办案件：包括待分配、进行中、待审核
          result = result.filter(case_ => ['pending', 'in-progress', 'review'].includes(case_.status))
        } else if (filters.status === 'completed') {
          // 已结案件：包括已完成、已归档
          result = result.filter(case_ => ['completed', 'archived'].includes(case_.status))
        } else {
          result = result.filter(case_ => case_.status === filters.status)
        }
      }

      // 案件类型筛选
      if (filters.caseType) {
        result = result.filter(case_ => case_.caseType === filters.caseType)
      }

      // 日期范围筛选
      if (filters.dateRange && filters.dateRange.length === 2) {
        const [startDate, endDate] = filters.dateRange
        result = result.filter(case_ => {
          const caseDate = new Date(case_.createDate)
          return caseDate >= startDate && caseDate <= endDate
        })
      }

      return result
    })

    // 计算属性 - 超期案件列表
    const overdueCases = computed(() => {
      return cases.value.filter(case_ => {
        const deadline = dayjs(case_.deadline)
        const now = dayjs()
        return now.isAfter(deadline) || now.diff(deadline, 'day') >= -3 // 包含即将超期的案件
      })
    })

    // 计算属性 - 过滤后的超期案件
    const filteredOverdueCases = computed(() => {
      let result = overdueCases.value

      // 超期类型筛选
      if (overdueFilter.value !== 'all') {
        const now = dayjs()
        result = result.filter(case_ => {
          const deadline = dayjs(case_.deadline)
          const diffDays = now.diff(deadline, 'day')
          
          switch (overdueFilter.value) {
            case 'critical':
              return diffDays > 7
            case 'warning':
              return diffDays >= 1 && diffDays <= 3
            case 'today':
              return diffDays === 0
            default:
              return true
          }
        })
      }

      // 部门筛选
      if (overdueDepartment.value) {
        result = result.filter(case_ => case_.department === overdueDepartment.value)
      }

      return result
    })

    // 初始化模拟数据
    const initData = () => {
      // 模拟案件数据
      cases.value = [
        {
          id: 1,
          caseNumber: 'CASE202401001',
          clientName: '张三',
          caseType: 'traffic',
          department: 'lawyer',
          assignedLawyer: '李律师',
          status: 'in-progress',
          priority: 'high',
          progress: 75,
          createDate: '2024-01-15',
          deadline: '2024-01-10', // 严重超期
          currentStage: '鉴定阶段',
          timeline: [
            { id: 1, title: '案件接收', completed: true, date: '2024-01-15', description: '案件已分配给李律师' },
            { id: 2, title: '材料收集', completed: true, date: '2024-01-20', description: '客户材料收集完成' },
            { id: 3, title: '鉴定申请', current: true, date: '2024-02-01', description: '正在进行伤情鉴定' },
            { id: 4, title: '法律诉讼', completed: false, description: '等待鉴定结果' },
            { id: 5, title: '案件结案', completed: false, description: '待完成' }
          ],
          operationLogs: [
            { id: 1, time: '2024-01-15 09:00', user: '系统', action: '案件创建', description: '案件自动分配' },
            { id: 2, time: '2024-01-20 14:30', user: '李律师', action: '更新进度', description: '材料收集完成' },
            { id: 3, time: '2024-02-01 10:15', user: '鉴定部', action: '鉴定申请', description: '申请伤情鉴定' }
          ]
        },
        {
          id: 2,
          caseNumber: 'CASE202401002',
          clientName: '王五',
          caseType: 'personal',
          department: 'marketing',
          assignedLawyer: '张律师',
          status: 'pending',
          priority: 'medium',
          progress: 25,
          createDate: '2024-01-20',
          deadline: '2024-02-10', // 即将超期
          currentStage: '材料收集',
          timeline: [
            { id: 1, title: '案件接收', completed: true, date: '2024-01-20' },
            { id: 2, title: '材料收集', current: true, description: '等待客户提供材料' },
            { id: 3, title: '法律评估', completed: false },
            { id: 4, title: '诉讼准备', completed: false },
            { id: 5, title: '案件结案', completed: false }
          ],
          operationLogs: [
            { id: 1, time: '2024-01-20 11:00', user: '市场部', action: '案件录入', description: '新案件录入系统' },
            { id: 2, time: '2024-01-22 16:00', user: '张律师', action: '材料请求', description: '向客户请求补充材料' }
          ]
        },
        {
          id: 3,
          caseNumber: 'CASE202401003',
          clientName: '李四',
          caseType: 'work',
          department: 'appraisal',
          assignedLawyer: '赵律师',
          status: 'completed',
          priority: 'low',
          progress: 100,
          createDate: '2024-01-10',
          deadline: '2024-02-28',
          currentStage: '已完成',
          timeline: [
            { id: 1, title: '案件接收', completed: true, date: '2024-01-10' },
            { id: 2, title: '材料收集', completed: true, date: '2024-01-15' },
            { id: 3, title: '工伤鉴定', completed: true, date: '2024-01-25' },
            { id: 4, title: '赔偿协商', completed: true, date: '2024-02-10' },
            { id: 5, title: '案件结案', completed: true, date: '2024-02-20' }
          ],
          operationLogs: [
            { id: 1, time: '2024-01-10 09:30', user: '系统', action: '案件创建' },
            { id: 2, time: '2024-02-20 15:00', user: '赵律师', action: '案件结案', description: '赔偿协议达成，案件结案' }
          ]
        }
      ]

      // 更新统计数据
      updateStatistics()
    }

    // 更新统计数据
    const updateStatistics = () => {
      const total = cases.value.length
      const completed = cases.value.filter(c => c.status === 'completed').length
      const pending = cases.value.filter(c => c.status === 'in-progress' || c.status === 'pending').length
      const overdue = cases.value.filter(c => isOverdue(c.deadline) && c.status !== 'completed').length
      
      statistics.totalCases = total
      statistics.completedCases = completed
      statistics.pendingCases = pending
      statistics.overdueCases = overdue
      statistics.newCasesThisMonth = 15 // 模拟数据
      statistics.completionRate = total > 0 ? Math.round((completed / total) * 100) : 0
      statistics.avgProcessingDays = 25 // 模拟数据
      
      pagination.total = total
    }

    // 工具方法
    const getCaseTypeColor = (type) => {
      const colorMap = {
        traffic: 'primary',
        personal: 'success',
        accident: 'warning',
        work: 'danger'
      }
      return colorMap[type] || 'info'
    }

    const getCaseTypeText = (type) => {
      const textMap = {
        traffic: '交通事故',
        personal: '人身损害',
        accident: '意外险',
        work: '工伤职伤'
      }
      return textMap[type] || '其他'
    }

    const getDepartmentClass = (department) => {
      const classMap = {
        marketing: 'dept-marketing',
        lawyer: 'dept-lawyer',
        appraisal: 'dept-appraisal',
        finance: 'dept-finance'
      }
      return classMap[department] || 'dept-default'
    }

    const getDepartmentText = (department) => {
      const textMap = {
        marketing: '市场部',
        lawyer: '律师部',
        appraisal: '鉴定部',
        finance: '财务部'
      }
      return textMap[department] || '未分配'
    }

    const getStatusType = (status) => {
      const typeMap = {
        pending: 'warning',
        'in-progress': 'primary',
        review: 'info',
        completed: 'success',
        archived: 'info'
      }
      return typeMap[status] || 'info'
    }

    const getStatusText = (status) => {
      const textMap = {
        pending: '待分配',
        'in-progress': '进行中',
        review: '待审核',
        completed: '已完成',
        archived: '已归档'
      }
      return textMap[status] || '未知'
    }

    const getPriorityType = (priority) => {
      const typeMap = {
        low: 'info',
        medium: 'warning',
        high: 'danger'
      }
      return typeMap[priority] || 'info'
    }

    const getPriorityText = (priority) => {
      const textMap = {
        low: '低',
        medium: '中',
        high: '高'
      }
      return textMap[priority] || '普通'
    }

    const getProgressColor = (progress) => {
      if (progress < 30) return '#f56565'
      if (progress < 70) return '#ed8936'
      return '#38a169'
    }

    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD')
    }

    const formatDateTime = (datetime) => {
      return dayjs(datetime).format('YYYY-MM-DD HH:mm')
    }

    const isOverdue = (deadline) => {
      return dayjs().isAfter(dayjs(deadline))
    }

    // 事件处理方法
    const handleSearch = () => {
      pagination.currentPage = 1
    }

    const handleDateChange = () => {
      pagination.currentPage = 1
    }

    const resetFilters = () => {
      searchQuery.value = ''
      filters.department = ''
      filters.status = ''
      filters.caseType = ''
      filters.dateRange = null
      pagination.currentPage = 1
    }

    const applyFilters = () => {
      pagination.currentPage = 1
      ElMessage.success('筛选条件已应用')
    }

    const handleSelectionChange = (selection) => {
      selectedCases.value = selection
    }

    const handleSortChange = ({ prop, order }) => {
      // 这里可以实现排序逻辑
      ElMessage.info(`按 ${prop} ${order === 'ascending' ? '升序' : '降序'} 排序`)
    }

    const handleSizeChange = (size) => {
      pagination.pageSize = size
      pagination.currentPage = 1
    }

    const handleCurrentChange = (page) => {
      pagination.currentPage = page
    }

    const refreshData = () => {
      loading.value = true
      setTimeout(() => {
        initData()
        loading.value = false
        ElMessage.success('数据已刷新')
      }, 1000)
    }

    const exportCases = () => {
      ElMessage.success('案件数据导出功能开发中...')
    }

    const showStatistics = () => {
      statisticsDialogVisible.value = true
    }

    const exportStatistics = () => {
      ElMessage.success('统计报表导出功能开发中...')
    }

    const viewCaseDetail = (caseData) => {
      selectedCase.value = caseData
      detailDialogVisible.value = true
    }

    const editCase = (caseData) => {
      ElMessage.info(`编辑案件: ${caseData.caseNumber}`)
      // 这里可以打开编辑对话框或跳转到编辑页面
    }

    const handleMoreAction = ({ action, case: caseData }) => {
      switch (action) {
        case 'transfer':
          ElMessage.info(`转移案件: ${caseData.caseNumber}`)
          break
        case 'archive':
          ElMessageBox.confirm('确认归档此案件吗？', '确认操作', {
            type: 'warning'
          }).then(() => {
            ElMessage.success('案件已归档')
          })
          break
        case 'priority':
          ElMessage.info(`设置优先级: ${caseData.caseNumber}`)
          break
        case 'notes':
          ElMessage.info(`添加备注: ${caseData.caseNumber}`)
          break
      }
    }

    // 超期提醒相关方法
    const showOverdueReminder = () => {
      updateOverdueStats()
      overdueDialogVisible.value = true
    }

    const showOverdueDetails = () => {
      updateOverdueStats()
      overdueDialogVisible.value = true
    }

    const updateOverdueStats = () => {
      const now = dayjs()
      let criticalCount = 0
      let warningCount = 0
      let todayCount = 0

      overdueCases.value.forEach(case_ => {
        const deadline = dayjs(case_.deadline)
        const diffDays = now.diff(deadline, 'day')
        
        if (diffDays > 7) {
          criticalCount++
        } else if (diffDays >= 1 && diffDays <= 3) {
          warningCount++
        } else if (diffDays === 0) {
          todayCount++
        }
      })

      overdueStats.criticalCount = criticalCount
      overdueStats.warningCount = warningCount
      overdueStats.todayCount = todayCount
    }

    const getOverdueDays = (deadline) => {
      const now = dayjs()
      const deadlineDate = dayjs(deadline)
      return Math.max(0, now.diff(deadlineDate, 'day'))
    }

    const getOverdueType = (days) => {
      if (days > 7) return 'danger'
      if (days >= 1) return 'warning'
      return 'info'
    }

    const getDepartmentType = (department) => {
      const typeMap = {
        lawyer: 'primary',
        appraisal: 'success',
        marketing: 'warning'
      }
      return typeMap[department] || 'info'
    }


    const handleOverdueSelectionChange = (selection) => {
      selectedOverdueCases.value = selection
    }

    const handleOverdueSizeChange = (size) => {
      overduePagination.pageSize = size
      overduePagination.currentPage = 1
    }

    const handleOverdueCurrentChange = (page) => {
      overduePagination.currentPage = page
    }

    const sendSingleReminder = (caseData) => {
      ElMessageBox.confirm(
        `确定要向 ${caseData.lawyer} 发送案件 "${caseData.title}" 的超期提醒吗？`,
        '发送提醒',
        {
          confirmButtonText: '发送',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // 模拟发送提醒
        ElMessage.success(`已向 ${caseData.lawyer} 发送超期提醒`)
      }).catch(() => {
        ElMessage.info('已取消发送')
      })
    }

    const sendBatchOverdueReminder = () => {
      if (selectedOverdueCases.value.length === 0) {
        ElMessage.warning('请先选择要提醒的案件')
        return
      }

      ElMessageBox.confirm(
        `确定要向选中的 ${selectedOverdueCases.value.length} 个案件的负责律师发送超期提醒吗？`,
        '批量提醒',
        {
          confirmButtonText: '发送',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // 模拟批量发送提醒
        overdueLoading.value = true
        setTimeout(() => {
          overdueLoading.value = false
          ElMessage.success(`已向 ${selectedOverdueCases.value.length} 个案件的负责律师发送超期提醒`)
          selectedOverdueCases.value = []
        }, 1000)
      }).catch(() => {
        ElMessage.info('已取消批量提醒')
      })
    }

    // 生命周期
    onMounted(() => {
      initData()
    })

    return {
      loading,
      searchQuery,
      detailDialogVisible,
      statisticsDialogVisible,
      selectedCase,
      selectedCases,
      filters,
      pagination,
      statistics,
      cases,
      filteredCases,
      overdueCases,
      filteredOverdueCases,
      overdueDialogVisible,
      overdueLoading,
      overdueFilter,
      overdueDepartment,
      selectedOverdueCases,
      overduePagination,
      overdueStats,
      getCaseTypeColor,
      getCaseTypeText,
      getDepartmentClass,
      getDepartmentText,
      getDepartmentType,
      getStatusType,
      getStatusText,
      getPriorityType,
      getPriorityText,
      getProgressColor,
      formatDate,
      formatDateTime,
      isOverdue,
      getOverdueDays,
      getOverdueType,
      handleSearch,
      handleDateChange,
      resetFilters,
      applyFilters,
      handleSelectionChange,
      handleSortChange,
      handleSizeChange,
      handleCurrentChange,
      refreshData,
      exportCases,
      showStatistics,
      exportStatistics,
      viewCaseDetail,
      editCase,
      handleMoreAction,
      showOverdueReminder,
      showOverdueDetails,
      updateOverdueStats,
      handleOverdueSelectionChange,
      handleOverdueSizeChange,
      handleOverdueCurrentChange,
      sendSingleReminder,
      sendBatchOverdueReminder
    }
  }
}
</script>

<style scoped>
.case-management {
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1a202c;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.page-description {
  color: #718096;
  margin: 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1a202c;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  color: #718096;
  font-size: 14px;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-change.positive {
  color: #38a169;
}

.stat-change.negative {
  color: #e53e3e;
}

.stat-change.neutral {
  color: #718096;
}

/* 筛选工具栏 */
.filter-toolbar {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-left {
  display: flex;
  gap: 12px;
  flex: 1;
  align-items: center;
}

.search-input {
  width: 250px;
}

.filter-select {
  width: 150px;
}

.date-picker {
  width: 240px;
}

.filter-right {
  display: flex;
  gap: 8px;
}

/* 案件列表 */
.case-list-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.case-table {
  width: 100%;
}

.case-table :deep(.el-table__row) {
  height: 65px;
}

.case-table :deep(.el-table__cell) {
  padding: 15px 8px;
  vertical-align: middle;
}

.case-number-link {
  color: #3182ce;
  text-decoration: none;
  font-weight: 500;
}

.case-number-link:hover {
  color: #2c5aa0;
  text-decoration: underline;
}

.department-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.dept-marketing {
  background: #fed7d7;
  color: #c53030;
}

.dept-lawyer {
  background: #bee3f8;
  color: #2c5aa0;
}

.dept-appraisal {
  background: #c6f6d5;
  color: #276749;
}

.dept-finance {
  background: #fbb6ce;
  color: #97266d;
}

.dept-default {
  background: #e2e8f0;
  color: #4a5568;
}

.progress-bar {
  width: 100%;
  height: 100%;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: stretch;
  min-height: 40px;
}

.progress-bar :deep(.el-progress) {
  width: 100%;
  display: flex;
  align-items: center;
  flex: 1;
}

.progress-bar :deep(.el-progress-bar) {
  flex: 1;
  line-height: normal;
  display: flex;
  align-items: center;
}

.progress-bar :deep(.el-progress-bar__outer) {
  height: 10px !important;
  background-color: #f5f5f5;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.progress-bar :deep(.el-progress-bar__inner) {
  border-radius: 5px;
  transition: width 0.6s ease;
  height: 100% !important;
  position: absolute;
  left: 0;
  top: 0;
}

.progress-bar :deep(.el-progress__text) {
  margin-left: 10px !important;
  font-size: 12px;
  font-weight: 600;
  min-width: 40px;
  line-height: normal;
  color: #606266;
  white-space: nowrap;
}

.progress-container {
  padding: 8px 4px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #e2e8f0;
}

/* 案件详情对话框 */
.case-detail-dialog {
  border-radius: 12px;
}

.case-detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item .label {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-item .value {
  font-size: 14px;
  color: #1a202c;
  font-weight: 500;
}

.progress-detail {
  background: #f7fafc;
  border-radius: 8px;
  padding: 20px;
}

.progress-overview {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.progress-info {
  flex: 1;
}

.progress-text {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 4px;
}

.progress-stage {
  font-size: 14px;
  color: #718096;
}

.progress-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.timeline-item.completed {
  background: #f0fff4;
}

.timeline-item.current {
  background: #eff6ff;
  border: 1px solid #3182ce;
}

.timeline-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.timeline-item.completed .timeline-icon {
  background: #38a169;
  color: white;
}

.timeline-item.current .timeline-icon {
  background: #3182ce;
  color: white;
}

.timeline-item:not(.completed):not(.current) .timeline-icon {
  background: #e2e8f0;
  color: #718096;
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 4px;
}

.timeline-date {
  font-size: 12px;
  color: #718096;
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 13px;
  color: #4a5568;
}

.operation-logs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.log-item {
  display: grid;
  grid-template-columns: 140px 100px 1fr 2fr;
  gap: 12px;
  padding: 12px;
  background: #f7fafc;
  border-radius: 6px;
  border-left: 3px solid #3182ce;
}

.log-time {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
}

.log-user {
  font-size: 13px;
  color: #2d3748;
  font-weight: 500;
}

.log-action {
  font-size: 13px;
  color: #1a202c;
  font-weight: 600;
}

.log-desc {
  font-size: 12px;
  color: #4a5568;
}

/* 统计报表 */
.statistics-content {
  padding: 20px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.chart-item {
  background: #f7fafc;
  border-radius: 8px;
  padding: 20px;
}

.chart-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 16px 0;
  text-align: center;
}

.chart-placeholder {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 6px;
  border: 2px dashed #cbd5e0;
}

.chart-mock {
  color: #718096;
  font-size: 14px;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 0 0;
  border-top: 1px solid #e2e8f0;
}

/* 超期提醒样式 */
.overdue-reminder-content {
  max-height: 70vh;
  overflow-y: auto;
}

.overdue-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.overdue-stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.overdue-stat-card.critical {
  border-left: 4px solid #ef4444;
}

.overdue-stat-card.critical .stat-icon {
  background: #fef2f2;
  color: #ef4444;
}

.overdue-stat-card.warning {
  border-left: 4px solid #f59e0b;
}

.overdue-stat-card.warning .stat-icon {
  background: #fffbeb;
  color: #f59e0b;
}

.overdue-stat-card.today {
  border-left: 4px solid #3b82f6;
}

.overdue-stat-card.today .stat-icon {
  background: #eff6ff;
  color: #3b82f6;
}

.overdue-stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.overdue-stat-card .stat-content {
  flex: 1;
}

.overdue-stat-card .stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 4px;
}

.overdue-stat-card .stat-label {
  color: #6b7280;
  font-size: 14px;
}

.overdue-filters {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.overdue-filters .filter-select {
  width: 200px;
}

.overdue-cases-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.overdue-pagination {
  padding: 16px;
  display: flex;
  justify-content: center;
}

.overdue-date {
  color: #ef4444;
  font-weight: bold;
}

.overdue-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.overdue-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.overdue-card .stat-change {
  color: #ef4444;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .case-management {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .filter-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-input,
  .filter-select,
  .date-picker {
    width: 100%;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .progress-overview {
    flex-direction: column;
    text-align: center;
  }
  
  .log-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 16px;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .filter-toolbar {
    padding: 16px;
  }
  
  .case-detail-content {
    max-height: 60vh;
  }
  
  .detail-section {
    margin-bottom: 24px;
  }
}
</style>
